<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  在<head> 标签内部添加 插件  直接用鼠标托-->
    <script src="vue.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css">
</head>

<style>
    /* 因为这里是调节： header 顶部栏的样式  所以要在这里添加 右对齐的方式  */

    .el-header, .el-footer {
        background-color: #D3DCE6;
        color: #333;
        text-align: right;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    /*   在style中  设置网页的样式： 大小*/
    html, body, .el-container {
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
        /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度，高度自行调整*/
        height: 1400px;
    }

    /*  样式这边 复制  就不用添加 <style> 标签了  否则会报错   */

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

</style>
</head>
<body>
<div id="app">
    <el-container>
        <!--                                   顶部                                 -->
        <el-header> <!--顶部   dropdown： 下拉列表-->
            <!--  在 顶部 复制element官网下载的 执行代码  -->
            <el-dropdown>
  <span class="el-dropdown-link"> 个人中心 <i class="el-icon-arrow-down el-icon--left"></i>
  </span>
                <el-dropdown-menu slot="dropdown">
                    <!-- 在这里修改密码 要有对应的事件 所以 添加一个<a> 标签  然后 就可以在里面添加请求 跳转页面 -->
                    <el-dropdown-item><a href="#">修改密码 </a></el-dropdown-item>
                    <el-dropdown-item>狮子头</el-dropdown-item>
                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <!--                    侧边栏容器     NavMenu 导航菜单                     -->
        <el-container>
            <el-aside>
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo">
                    <el-submenu index="1">
                        <template slot="title">
                            <!-- class="el-icon-time   这里可以更改 图标的样式-->
                            <i class="el-icon-time"></i>
                            <span>预约管理</span>
                        </template>
                        <el-menu-item-group>
                        <!--  跳转页面嵌套 ：-->
                         <!--  添加 target="main" 属性后表示：点击预约列表之后  将 www.jd.com的页面嵌套取代了  aaa指代的页面
                                因为在  底部区域   <iframe>标签设置的是 www.baidu.com  ；aaa只是起到指代 www.baidu.com的作用   点击预约列表后  百度就会被取代    -->
                            <el-menu-item index="1-1"><a href="http://www.taobao.com" target="aaa">预约列表</a></el-menu-item>
                            <el-menu-item index="1-2"><a href="#">检查项管理</a></el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <!--                                   底部区域                                 -->
               <!-- 在主要区  运用到了 嵌套页面： <iframe src ="www.baidu.com">-->
            <el-main>
                <iframe name="aaa" src="main.html"width="100%" height="100%" frameborder="0"></iframe>
            </el-main>
        </el-container>
        <!--                                   底部区域                                 -->

        <el-container>
            <el-footer>底部区域</el-footer>
        </el-container>
    </el-container>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {}
    })
</script>

</body>
</html>